<template>
  <div class="model-box">
    <div class="button-box">
      <div style="display: flex;">
        <ac-input v-model="filterName" style="width: 150px" placeholder="应用名称" />
        <el-button style="margin-left: 10px;" type="primary" @click="loadData">
          <cc-icon iconId="018dc9c3efe489a7d117" style="margin-right: 5px" />查询
        </el-button>
        <div @click="selectMode = !selectMode" style="margin-left: 20px;cursor: pointer">
          <el-checkbox v-model="selectMode" />
          <span style="margin-left: 5px">选择模式</span>
        </div>
        <el-button v-if="selectMode" style="margin-left: 10px;" type="primary" @click="selectAll">
          <cc-icon iconId="018dca412c4e207388f7" style="margin-right: 5px" />全选
        </el-button>
        <el-button v-if="selectMode" style="margin-left: 10px;" type="primary" @click="unselectAll">
          <cc-icon iconId="018dca412c4ebd53fd1d" style="margin-right: 5px" />取消选择
        </el-button>
      </div>
      <div class="button-item">
        <el-upload
          action=""
          :http-request="handleImport"
          :show-file-list="false"
          accept=".dat"
        >
          <el-button
            style="
              color: #ffffff;
              background-color: #00CED1;
              border: 1px solid #00CED1;
            "
          >
            <ac-icon
              iconId="018dcc257a83b0d6deab"
              title="导入应用"
              style="margin-right: 8px"
            />导入应用
          </el-button>
        </el-upload>

        <el-button
          style="
            color: #ffffff;
            background-color: #FF8C00;
            border: 1px solid #FF8C00
          "
          @click="download()"
        >
          <ac-icon
            iconId="018dcc257a840e260284"
            title="导出应用"
            style="margin-right: 8px"
          />导出应用
        </el-button>
      </div>
    </div>

    <div class="item-box" @click="addItem">
      <div style="font-size: 14px; display: flex;align-items: center">
        <ac-icon
          iconId="018dca3b4707c4c43a2f"
          size="18"
          color="#474747"
        />
        <span style="margin-left: 10px">添加应用</span>
      </div>
    </div>

    <div
      v-for="item in dataList"
      :key="item.id"
      :class="['item-box', selectMode && item.checked ? 'active' : '']"
      @click="clickItem(item)"
    >
      <div class="item-main">
        <div class="item-header">
          <div class="item-name-line">
            <div>
              <img :src="imageUrl + item.iconId" style="width: 25px;height: 25px;margin-right: 10px" alt />
            </div>
            <span class="item-name" :title="item.name">{{item.name}}</span>
          </div>
        </div>
        <div class="item-remark">
          <span :title="item.description">{{item.description || '暂无描述'}}</span>
        </div>
        <div class="item-button">
          <div class="time-box"></div>
          <div class="button-list">
            <el-tooltip
              effect="light"
              content="编辑"
              popper-class="padding-10-15"
            >
              <ac-icon
                size="15"
                iconId="018dca6db20c6a3aaf68"
                color="#0085f6"
                @click.stop="editItem(item)"
              />
            </el-tooltip>
            <el-tooltip
              effect="light"
              content="删除"
              popper-class="padding-10-15"
            >
              <ac-icon
                size="15"
                iconId="018dc9c3efd3a0502886"
                color="#F56C6C"
                @click.stop="deleteItem(item)"
              />
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>

  <el-dialog
    v-model="visible"
    :title="title"
    :close-on-click-modal="false"
    destroy-on-close
    fullscreen
    class="no-padding"
  >
    <div class="dialog-body">
      <div class="left">
        <el-form
          ref="dataForm"
          label-width="100px"
          label-position="right"
          :model="formData"
          :rules="rules"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="应用名称" prop="name">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序" prop="ordinal">
                <ac-number v-model="formData.ordinal"></ac-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="应用图标" prop="iconId">
                <ac-image v-model="formData.iconId" style="width: 50px;height:50px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="使用流程" prop="useFlow">
                <ac-dict-switch v-model="formData.useFlow" dictCode="dictYesNo"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col v-if="formData.useFlow === '1'" :span="24">
              <el-form-item label="流程名称" prop="flowId">
                <ac-remote-select
                  v-model="formData.flowId"
                  data-url="/system/aiFlow/queryPage"
                  :option="{id: formData.flowId, name: formData.flowName}"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formData.useFlow !== '1'">
            <el-col :span="24">
              <el-form-item label="模型名称" prop="modelId">
                <div style="display: flex;flex-grow: 1;">
                  <div style="flex-grow: 1">
                    <ac-remote-select
                      v-model="formData.modelId"
                      data-url="/system/aiModel/queryPage"
                      :option="{id: formData.modelId, name: formData.modelName}"
                      :query="{supplierModelType: '01'}"
                    />
                  </div>
                  <llm-attr v-model="formData.modelParamJson" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="知识库名称" prop="knowledgeId">
                <ac-remote-select
                  v-model="formData.knowledgeId"
                  data-url="/system/knowledge/queryPage"
                  :option="{id: formData.knowledgeId, name: formData.knowledgeName}"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="开放方式" prop="openType">
                <ac-radio
                  v-model="formData.openType"
                  :options="[{key: '1', value: '所有系统'}, {key: '0', value: '部分系统'}]"
                />
                <ac-checkbox
                  v-model="formData.systemIds"
                  v-if="formData.openType === '0'"
                  :options="systemList"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="应用描述" label-position="top" prop="description">
                <el-input v-model="formData.description" type="textarea" :rows="3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formData.useFlow === '0'">
            <el-col :span="24">
              <el-form-item label="" label-position="top" prop="prompt">
                <div class="inline-box" style="flex-grow: 1">
                  <div style="flex-grow: 1">提示词</div>
                  <div><llm-prompt v-model="formData.prompt" /></div>
                </div>
                <el-input v-model="formData.prompt" type="textarea" :rows="5" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="开场白" label-position="top" prop="prologue">
                <ac-rich-editor
                  v-model="formData.prologue"
                  style="height: 150px"
                  :excludeKeys="[
                    'headerSelect', 'blockquote', 'insertLink', 'bulletedList', 'numberedList',
                    'todo', 'group-indent', 'group-image', 'group-video', 'insertTable',
                    'codeBlock', 'divider', 'undo', 'redo', 'group-more-style', 'lineHeight',
                    'group-justify', 'insertVideo', 'fontFamily'
                  ]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="预设问题" label-position="top">
                <template #label>
                  <div class="form-label">
                    <div>预设问题</div>
                    <div><el-button type="primary" size="small" @click="addQuestion">添加</el-button></div>
                  </div>
                </template>
                <div
                  v-for="(question, index) in formData.questionList"
                  :key="index"
                  class="question-list"
                >
                  <el-input v-model="question.value" />
                  <div style="width: 90px;text-align: right">
                    <ac-icon
                      v-if="index > 0 && index < formData.questionList.length"
                      iconId="018fa3973ded010d7ef2"
                      title="上移"
                      style="margin-left: 10px"
                      @click="moveQuestionUp(index)"
                    />
                    <ac-icon
                      v-if="index < formData.questionList.length - 1"
                      iconId="018fa397630c01052d7e"
                      title="下移"
                      @click="moveQuestionDown(index)"
                    />
                    <ac-icon
                      iconId="018dc9c3efd3a0502886"
                      title="删除"
                      color="red"
                      @click="deleteQuestion(index)"
                    />
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formData.useFlow !== '1'">
            <el-col :span="24">
              <el-form-item label="保留历史记录数" label-position="top">
                <ac-number v-model="formData.recordSize" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="right">
        <div ref="messageBox" class="message-box">
          <div
            v-if="(formData.prologue && formData.prologue !== '<p><br></p>')
              || formData.questionList.filter(item => item.value).length > 0"
            class="chat-item answer"
          >
            <div class="avatar">
              <img v-if="formData.iconId" :src="imageUrl + formData.iconId" alt />
              <img v-else :src="aiIcon" alt />
            </div>
            <div class="message">
              <div class="header">
                <div class="name" v-if="formData.name">{{formData.name}}</div>
                <div class="date">{{formData.currTime}}</div>
              </div>
              <div class="body">
                <div
                  v-if="formData.prologue && formData.prologue !== '<p><br></p>'"
                  class="text"
                  v-html="formData.prologue"
                ></div>
              </div>
              <div class="question-box">
                <div
                  v-for="(question, index) in formData.questionList.filter(item => item.value)"
                  :key="index"
                  class="question-item"
                  @click="sendMessage(question.value)"
                >{{question.value}}</div>
              </div>
            </div>
          </div>
          <div
            v-for="(chat, index) in chatList"
            :key="index"
            :class="['chat-item', chat.type === 'user' ? 'question' : 'answer']"
          >
            <div v-if="chat.type === 'assistant'" class="avatar">
              <img v-if="formData.iconId" :src="imageUrl + formData.iconId" alt />
              <img v-else :src="aiIcon" alt />
            </div>
            <div class="message chat">
              <div>
                <div class="header">
                  <div class="date">{{chat.time}}</div>
                </div>
                <div class="body">
                  <div
                    class="text"
                    v-html="chat.message"
                  ></div>
                </div>
              </div>
            </div>
            <div v-if="chat.type === 'user'" class="avatar">
              <img :src="aiIcon" alt />
            </div>
          </div>
        </div>
        <div class="input-box">
          <el-input
            v-model="formData.query"
            border="none"
            type="textarea"
            placeholder="Shift + Enter 换行"
            autosize
            @keydown="handleKeydown"
          />
          <el-button
            plain
            :disabled="chatLoading || !formData.query"
            @click.stop="sendMessage(formData.query)"
          >
            <ac-icon iconId="018ece4f6c1823ddf065" size="18" />
          </el-button>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="visible=false"
      >取消</el-button>
      <el-button
        type="primary"
        size="default"
        :loading="loading"
        @click="submit"
      >提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import api from "@/http/api";
import aiIcon from '@/assets/images/chat-avatar.jpg';
import { ElMessage, ElMessageBox } from "element-plus";
import tool from "@/utils/tool";
import date from "@/utils/date";
import LlmAttr from "@/admin/ai/components/llm-attr.vue";
import LlmPrompt from "@/admin/ai/components/llm-prompt.vue";

const sessionId = ref(tool.uuid());
const selectMode = ref(false);
const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
const filterName = ref('');
const dataList = ref([]);
const visible = ref(false);
const title = ref('');
const dataForm = ref();
const formData = ref({});
const loading = ref(false);
const messageBox = ref();
const chatList = ref([]);
const chatLoading = ref(false);
const rules = ref({
  name: [
    {required: true, message: '应用名称不能为空！', trigger: 'blur'},
    {max: 100, message: '应用名称长度最多只能是100个字符', trigger: ['blur', 'change']}
  ],
  iconId: [
    {required: true, message: '应用图标不能为空！', trigger: 'blur'}
  ],
  useFlow: [
    {required: true, message: '使用流程不能为空！', trigger: 'blur'}
  ],
  flowId: [
    {required: true, message: '模型名称不能为空！', trigger: 'blur'}
  ],
  modelId: [
    {required: true, message: '模型名称不能为空！', trigger: 'blur'}
  ],
  remark: [
    {max: 1000, message: '备注长度最多只能是1000个字符', trigger: ['blur', 'change']}
  ]
});

const addItem = () => {
  formData.value = {
    currTime: date.format(new Date().getTime(), 'yyyy/MM/dd HH:mm:ss'),
    useFlow: '0',
    openType: '0',
    questionList: []
  };
  title.value = "新增应用";
  loading.value = false;
  chatList.value = [];
  visible.value = true;
  loadSystem();
};

const clickItem = item => {
  if (selectMode.value) {
    item.checked = !item.checked;
  } else {
    editItem(item);
  }
};

const editItem = (item) => {
  if (!item) return;
  formData.value = tool.deepClone(item);
  formData.value.currTime = date.format(new Date().getTime(), 'yyyy/MM/dd HH:mm:ss');
  if (formData.value.questionJson) {
    formData.value.questionList = JSON.parse(formData.value.questionJson);
  }
  if (!formData.value.questionList) {
    formData.value.questionList = [];
  }

  title.value = "编辑应用";
  loading.value = false;
  chatList.value = [];
  visible.value = true;
  loadSystem();
};

const submit = () => {
  dataForm.value.validate(valid => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        loading.value = true;
        const data = tool.deepClone(formData.value);
        if (data.questionList && data.questionList.length > 0) {
          data.questionJson = JSON.stringify(data.questionList);
        } else {
          data.questionJson = '';
        }
        delete data.questionList;
        api.post('/system/aiApplication/save', data).then(res => {
          if(res.code === '1') {
            visible.value = false;
            ElMessage.success(res.message);
            loadData();
          } else {
            ElMessage.error(res.message);
          }
          loading.value = false;
        }).catch(() => {
          loading.value = false;
        });
      });
    } else {
      ElMessage.error('数据录入不正确，请重新检查！');
    }
  });
};

const download = () => {
  const ids = dataList.value.filter(item => item.checked).map(item => item.id);
  if (!ids || ids.length === 0) {
    ElMessage.error("请先选择要导出的应用！");
    return;
  }

  api.downloadFile('/system/aiApplication/exportData', {ids: ids}).then(res => api.saveFileLocal(res));
};

const deleteItem = (supplierModel) => {
  ElMessageBox.confirm('请确认是否删除应用【' + supplierModel.name + '】？', '提示', {type: 'warning'}).then(() => {
    api.post('/system/aiApplication/delete', supplierModel).then(res => {
      if(res.code === '1') {
        ElMessage.success(res.message);
        loadData();
      } else {
        ElMessage.error(res.message);
      }
    });
  });
};

const handleImport = (file) => {
  api.uploadFile('/system/aiApplication/importData', {'file': file.file}).then((res) => {
    ElMessage.success(res.message);
    loadData();
  });
};

const loadData = () => {
  dataList.value = [];
  api.post('/system/aiApplication/queryList', {name: filterName.value || ''}).then(res => {
    dataList.value = res.data || [];
  });
};

const selectAll = () => {
  dataList.value.forEach(data => data.checked = true);
};

const unselectAll = () => {
  dataList.value.forEach(data => data.checked = false);
};

const addQuestion = () => {
  if (!formData.value.questionList) {
    formData.value.questionList = [];
  }
  formData.value.questionList.push({value: ''});
};

const moveQuestionUp = (index) => {
  const curr = formData.value.questionList[index];
  formData.value.questionList[index] = formData.value.questionList[index - 1];
  formData.value.questionList[index - 1] = curr;
};

const moveQuestionDown = (index) => {
  const curr = formData.value.questionList[index];
  formData.value.questionList[index] = formData.value.questionList[index + 1];
  formData.value.questionList[index + 1] = curr;
};

const deleteQuestion = (index) => {
  ElMessageBox.confirm("请确认是否删除？", "提示", { type: "warning" }).then(() => {
    formData.value.questionList.splice(index, 1);
  }).catch(() => {});
};

const handleKeydown = (e) => {
  if (e.key === 'Enter') {
    if (!e.shiftKey) {
      e.preventDefault();
      sendMessage(formData.value.query);
    }
  }
};

const sendMessage = (query) => {
  if (chatLoading.value) {
    ElMessage.error("正在思考中，请稍候...");
    return;
  }

  if (formData.value.useFlow === '1' && !formData.value.flowId) {
    ElMessage.error("请选择流程名称！");
    return;
  }

  if (!query) {
    ElMessage.error("消息不能为空！");
    return;
  }

  const data = tool.deepClone(formData.value);
  data.sessionId = sessionId.value;
  data.query = query;
  const question = {
    type: 'user',
    time: date.format(new Date().getTime(), 'yyyy/MM/dd HH:mm:ss'),
    message: data.query,
    status: 1
  };
  const answer = {
    type: 'assistant',
    time: date.format(new Date().getTime(), 'yyyy/MM/dd HH:mm:ss'),
    message: '正在思考...'
  };
  chatList.value.push(question);
  chatList.value.push(answer);
  formData.value.query = '';

  chatLoading.value = true;
  api.post('/system/aiApplication/debutChat', data, 5 * 60 * 1000).then(res => {
    answer.status = 1;
    answer.message = res.data.result || '';
    if (res.data.knowledge) {
      answer.message += '\n\n来源知识库---------------------------------------\n' + res.data.knowledge;
    }
    chatLoading.value = false;
  }).catch(() => {
    answer.status = 0;
    answer.message = '系统开小差中，请联系管理员解决...';
    chatLoading.value = false;
  });

  nextTick(() => {
    messageBox.value.scrollTo({ top: messageBox.value.scrollHeight, behavior: 'smooth' })
  });
};

const systemList = ref([]);
const loadSystem = async () => {
  if (systemList.value && systemList.value.length > 0) return;
  await api.post("/system/subsystem/queryList", {}).then((res) => {
    const options = [];
    if (res.data && res.data.length > 0) {
      res.data.forEach(data => {
        options.push({key: data.id, value: data.name});
      });
    }
    systemList.value = options;
  });
};

onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.model-box {
  padding: 20px;
  height: calc(100% - 40px);
  background: #f5f5f5;
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  grid-gap: 15px;
  justify-content: center;
  align-content: flex-start;
  overflow: auto;
  .button-box {
    display: flex;
    width: 100%;
    grid-column: 1 / -1;
    text-align: right;
    .button-item {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      gap: 15px;
      margin-bottom: 20px;
    }
  }
  .item-box {
    width: 250px;
    min-height: 140px;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    cursor: pointer;
    border: 1px solid transparent;
    .item-main {
      width: 100%;
      padding: 15px 20px;
      display: flex;
      flex-direction: column;
      .item-header {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .item-name-line {
          width: 1px;
          flex-grow: 1;
          margin-right: 8px;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          align-items: center;
          .item-name {
            width: 1px;
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            box-sizing: border-box;
            color: #333333;
            font-weight: bold;
            font-size: 16px;
          }
        }

        .ac-icon {
          flex-shrink: 0;
          cursor: pointer;
        }

        .el-checkbox__label {
          padding-left: 0;
        }
      }
      .item-remark {
        flex-grow: 1;
        margin-top: 8px;
        color: #888888;
        font-size: 12px;
        > span {
          width: 100%;
          display: block;
          line-height: 1.2;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
      .item-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        .time-box {
          flex-grow: 1;
          color: #999;
        }

        .ac-icon {
          cursor: pointer;
          margin-left: 12px;
        }
      }
    }
  }

  .item-box:hover {
    box-shadow: 0 0 20px 0 rgba(64, 158, 255, 0.25);
  }

  .item-box.active {
    border: 1px solid rgb(64, 158, 255);
    box-shadow: inset 0 0 0 1px rgb(64, 158, 255);
  }
}
.inline-box {
  display: flex;
  flex-direction: row;
}
.dialog-body {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 150px);
  padding: 20px 0;
  .left {
    width: 40%;
    border-right: 1px solid #ccc;
    padding: 0 20px;
    overflow: auto;
  }
  .right {
    width: 60%;
    display: flex;
    padding-left: 20px;
    flex-direction: column;
    .message-box {
      flex-grow: 1;
      overflow: auto;
      padding-right: 20px;
      .chat-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        .avatar {
          img {
            width: 34px;
            height: 34px;
          }
        }
        .message {
          flex-grow: 1;
          .header {
            color: #a9afb7;
            display: flex;
            margin-bottom: 10px;
            .name {
              margin-right: 10px;
            }
          }
          .text {
            box-sizing: border-box;
            background-color: #f5f5f5;
            color: rgba(0, 0, 0, .9);
            border-radius: 5px;
            padding: 8px 12px;
            white-space: pre-wrap;
            word-break: break-all;
            font-size: 14px;
            line-height: 1.5;
          }
          .question-box {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            .question-item {
              margin-top: 10px;
              border-radius: 5px;
              padding: 10px 15px;
              background-color: #fff;
              cursor: pointer;
              border: 1px solid #f0f0f0;
              box-shadow: 0 2px 4px #e6e6e6;
            }
          }
        }
        .message.chat {
          flex-grow: 0;
        }
      }
      .chat-item.answer {
        .avatar {
          margin-right: 10px;
        }
        .header {
          justify-content: flex-start;
        }
        .body {
          display: flex;
          justify-content: flex-start;
        }
      }
      .chat-item.question {
        justify-content: flex-end;
        .avatar {
          margin-left: 10px;
        }
        .header {
          justify-content: flex-end;
        }
        .body {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    .input-box {
      margin-right: 20px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 8px 0;
      box-sizing: border-box;
      --el-border: none;
      --el-border-color: transparent;
      --el-border-color-hover: transparent;
      --el-input-focus-border-color: transparent;
      --el-input-hover-border-color: transparent;
      el-input {
        --el-input-focus-border-color: transparent;
        --el-input-hover-border-color: transparent;
        flex-grow: 1;
        box-shadow: none;
      }
      :deep(textarea) {
        resize: none;
      }
      :deep(.el-textarea__inner):focus {
        box-shadow: none;
      }
      :deep(.el-textarea__inner):hover {
        box-shadow: none;
      }
    }
  }
}
.dialog-body.prompt {
  padding: 0;
  height: unset;
  .left {
    width: 50%;
    .tips {
      text-indent: 28px;
      line-height: 1.5;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
    }
    .try {
      margin-top: 10px;
      font-weight: 700;
    }
    .command-item {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      > div {
        cursor: pointer;
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
        margin-right: 8px;
      }
    }
    .button-box {
      margin-top: 10px;
      text-align: right;
    }
  }
  .right {
    width: 50%;
    padding: 0 20px;
    .tips {
      min-height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
.form-label {
  display: flex;
  > div:first-child {
    flex-grow: 1;
  }
  > div:last-child {
    margin-right: -10px;
  }
}
.question-list {
  margin-bottom: 8px;
  display: flex;
  width: 100%;
  .ac-icon {
    cursor: pointer;
    margin-left: 8px;
  }
}
</style>